<template>
  <div class="body-row g-fd-c">
    <div class="body-row-content">
      <table-cell
        v-for="(col, colIndex) in cols"
        :key="col.name"
        :col="col"
        :col-index="colIndex"
        :row="row"
        :index="index"
        :total="total"
        :level="level"
        @toggleExpand="toggleExpand"
        @contextmenu="toggleContextMenu"
      />
    </div>

    <div
      v-if="row.hasChildren"
      v-show="row.expand"
      class="body-child-container"
    >
      <table-row
        v-for="(child, childIndex) in children"
        :key="child[primaryKey] || childIndex"
        :row="child"
        :index="childIndex"
        :total="children.length"
        :level="level + 1"
        @toggleExpand="toggleExpand"
        @contextmenu="toggleContextMenu"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, inject } from "vue";

import { VarTableColumn } from "@/constants/types";

import TableCell from "./TableCell.vue";

const props = defineProps<{
  row: any;
  index: number;
  total: number;
  level: number;
}>();

const emit = defineEmits<{
  (e: "toggleExpand", row: any): void;
  (
    e: "contextmenu",
    evt: MouseEvent,
    row: any,
    item: any,
    col: VarTableColumn
  ): void;
}>();

const cols = inject("columns") as VarTableColumn[];
const primaryKey = inject("primaryKey") as string;

const children = computed(() => props.row.children || []);

const toggleExpand = (row: any) => {
  emit("toggleExpand", row);
};

const toggleContextMenu = (
  e: MouseEvent,
  row: any,
  item: any,
  col: VarTableColumn
) => {
  emit("contextmenu", e, row, item, col);
};
</script>

<style lang="scss">
@import "@/assets/css/app.scss";

.body-row {
  position: relative;
  
  .body-row-content {
    display: flex;
    flex-flow: row nowrap;
    min-height: 24px;
  }

  &:not(:last-child) {
    border-bottom: 1px solid $black-e0;
  }
}

.body-row > .body-child-container {
  flex: 0 0 100%;
  border-top: 1px solid $black-e0;
}

.body-child-container > .body-row > .body-col:first-child {
  padding-left: 31px;
}
</style>
